/*
 * 个人信息组件 - Personal Info Component
 * 展示个人资料、头像、联系方式等信息
 */

import React from 'react';
import { Card, Avatar, Button, Divider } from 'antd';
import { GithubOutlined, WechatOutlined, MailOutlined } from '@ant-design/icons';
import styles from './index.less';
// import picImage from '../../assets/images/pic.png';
const picImage = 'https://iiiu-assets-images.oss-cn-beijing.aliyuncs.com/assets/test.jpg?Expires=1756307172&OSSAccessKeyId=TMP.3KtH5yADB6FBiLcodsY4PjZoRWiHAp7TX3bJSF8tsyY5b4bSveBbwYfjfMZyPLJJAWvoxb23EJfkPnsemai1fjLjnEWYF7&Signature=9MGG6ukYcKa%2BnlPmx3ptISYRxZU%3D';

const PersonalInfo: React.FC = () => {

  return (
    <div className={styles.personalInfo}>
      <Card className={styles.card}>
        <div className={styles.header}>
          <Avatar 
            size={80} 
            src={picImage} 
            className={styles.avatar}
          />
          <div className={styles.info}>
            <h3 className={styles.name}>青萍叙事</h3>
            <p className={styles.title}>全栈开发者</p>
            <p className={styles.description}>分享技术 · 记录生活</p>
          </div>
        </div>
        
        <Divider />
        
        <div className={styles.stats}>
          <div className={styles.statItem}>
            <div className={styles.statNumber}>139</div>
            <div className={styles.statLabel}>文章</div>
          </div>
          <div className={styles.statItem}>
            <div className={styles.statNumber}>1.2k</div>
            <div className={styles.statLabel}>访问</div>
          </div>
          <div className={styles.statItem}>
            <div className={styles.statNumber}>365</div>
            <div className={styles.statLabel}>天数</div>
          </div>
        </div>
        
        <Divider />
        
        <div className={styles.social}>
          <Button 
            type="text" 
            icon={<GithubOutlined />} 
            className={styles.socialBtn}
          >
            GitHub
          </Button>
          <Button 
            type="text" 
            icon={<WechatOutlined />} 
            className={styles.socialBtn}
          >
            微信
          </Button>
          <Button 
            type="text" 
            icon={<MailOutlined />} 
            className={styles.socialBtn}
          >
            邮箱
          </Button>
        </div>
        
        <div className={styles.notice}>
          <p>💡 若您认可我的内容，欢迎请我喝杯咖啡~</p>
        </div>
      </Card>
    </div>
  );
};

export default PersonalInfo;